<template>
    <div>
        <form ref="formRef" autocomplete="off">
            <h1>编号:{{ this.title }}</h1>
            <hr>
            标题:<input type="text" placeholder="请输入代办标题" v-model="title">
            日期:<input type="date" v-model="date">
            <p>
                <button @click.prevent="add">提交</button>
            </p>
            <p>
                <button @click.prevent="reset">重置</button>
            </p>
        </form>
        <div>
            <span>标题</span>
            <span>日期</span>
            <span>操作</span>
        </div>
        <table>
            <div  style="height:300px;overflow-y: auto;" @scroll="onScroll">
                <div :style="{ height: arr.length * 30 + 'px' }">
                    <div :style="{ height: currentIndex * 30 + 'px' }">
                    </div>
                        <tbody>
                            <tr v-for="item in displayArr" :key="item.id" style="height: 30px;">
                                <td>{{ item.title }}</td>
                                <td>{{ item.date }}</td>
                                <td>
                                    <button @click="remove(item.id)">删除</button>
                                    <button @click="edit(item.id)">编辑</button>
                                </td>
                            </tr>
                        </tbody>
                </div>
            </div>
        </table>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            id: '',
            title: '',
            date: '',
            arr: [],
            currentIndex: 0
        }
    },
    methods: {
        add() {
            if (!this.title || !this.date) {
                return alert('请填写完整')
            }
            if (this.id) {
                const obj = this.arr.find(item => item.id === this.id)
                obj.title = this.title
                obj.date = this.date
            } else {
                const obj = {
                    id: this.arr.length ? this.arr[this.arr.length - 1].id + 1 : 1,
                    title: this.title,
                    date: this.date
                }
                this.arr.push(obj)
            }
            localStorage.setItem('todo-data', JSON.stringify(this.arr))
            this.id = ''
            this.title = ''
            this.date = ''
        },
        reset() {
            this.$refs.formRef.reset()
        },
        remove(id) {
            this.arr = this.arr.filter(item => item.id !== id)
            localStorage.setItem('todo-data', JSON.stringify(this.arr))
        },
        edit(id) {
            const obj = this.arr.find(item => item.id === id)
            this.id = obj.id
            this.title = obj.title
            this.date = obj.date
        },
        onScroll(e) {
            const scrollTop = e.target.scrollTop
            this.currentIndex = Math.floor(scrollTop / 30)
        }
    },
    created() {
        this.arr =JSON.parse(localStorage.getItem('todo-data')) || Array.from({ length: 1000 }, (_, k) => {
            return {
                id: k + 1,
                title: '标题' + (k + 1),
                date: '2023-03-19'
            }
        })
    },
    computed: {
        displayArr() {
            return this.arr.slice(this.currentIndex, this.currentIndex + 20)
        }
    },
}
</script>
<style>
table {
    border: 1px solid #000;
    border-collapse: collapse;
}
span{
    display: inline-block;
}
span,
th,
td {
    width: 100px;
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
}
</style>